<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 600px;
            height: 300px;
            background-color: antiquewhite;
            position: relative;
        }

        .box .tu {
            width: 100%;
            position: relative;
        }

        .box .tu img {
            width: 100%;
            position: absolute;
            opacity: 0;
        }

        .box .tu img.active {
            opacity: 1;
        }

        .box ul {
            list-style: none;
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
        }

        .box ul li {
            float: left;
            width: 10px;
            height: 10px;
            background-color: blue;
            border-radius: 50%;
            margin-left: 10px;
        }

        .box ul li.active {
            background-color: aqua;
        }

        .box .left {
            width: 30px;
            background-color: aqua;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }

        .box .right {
            width: 30px;
            background-color: aqua;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="tu">
            <!-- <img src="img/pic1.jpg" alt=""> -->
        </div>
        <ul>
            <!-- <li></li>
            <li></li>
            <li></li> -->
        </ul>
        <div class="left">&lt;</div>
        <div class="right">&gt;</div>
    </div>
</body>

</html>
<script>
    class Lunbo {
        constructor(arr, el) {
            this.data = arr
            this.dom = document.querySelector(el)
            this.index = 0
            this.jiange = null
            this.xuanran()
            this.xunhuai()
            this.shijian()

        }
        xuanran() {
            var str = this.data.map((item, index) => {
                return index == 0 ? `<img class="active" src="${item}" alt=""> ` : `<img src="${item}" alt=""> `
            }).join('')

            this.dom.querySelector('.tu').innerHTML = str
            var str2 = this.data.map((item, index) => {
                return index == 0 ? `<li class="active"></li> ` : `<li></li> `
            }).join('')
            this.dom.querySelector('ul').innerHTML = str2
        }
        xunhuai() {
            this.jiange = setInterval(() => {
                this.dom.querySelectorAll('.tu img')[this.index].classList.remove('active')
                this.dom.querySelectorAll('ul li')[this.index].classList.remove('active')
                this.index++
                if (this.index >= this.data.length) {
                    this.index = 0
                }
                this.dom.querySelectorAll('.tu img')[this.index].classList.add('active')
                this.dom.querySelectorAll('ul li')[this.index].classList.add('active')

            }, 1000)
        }
        shijian() {
            this.dom.onmouseover = () => {
                clearInterval(this.jiange)
            }
            this.dom.onmouseout = () => {
                this.xunhuai()
            }
            this.dom.querySelector('.left').onclick = () => {
                this.dom.querySelectorAll('.tu img')[this.index].classList.remove('active')
                this.dom.querySelectorAll('ul li')[this.index].classList.remove('active')
                this.index--
                if (this.index < 0) {
                    this.index = this.data.length - 1
                }
                this.dom.querySelectorAll('.tu img')[this.index].classList.add('active')
                this.dom.querySelectorAll('ul li')[this.index].classList.add('active')

            }
            this.dom.querySelector('.right').onclick = () => {
                this.dom.querySelectorAll('.tu img')[this.index].classList.remove('active')
                this.dom.querySelectorAll('ul li')[this.index].classList.remove('active')
                this.index++
                if (this.index >= this.data.length) {
                    this.index = 0
                }
                this.dom.querySelectorAll('.tu img')[this.index].classList.add('active')
                this.dom.querySelectorAll('ul li')[this.index].classList.add('active')

            }
            var tu = this.dom.querySelectorAll('.tu img')
            var dian = this.dom.querySelectorAll('ul li')
            console.log(tu, dian);
            for (let i = 0; i < tu.length; i++) {
                dian[i].onclick = () => {
                    for (let j = 0; j < tu.length; j++) {
                        dian[j].classList.remove('active')
                        tu[j].classList.remove('active')
                    }
                    dian[i].classList.add('active')
                    tu[i].classList.add('active')
                }
            }
        }

    }
    var arr = ['img/pic1.jpg', 'img/pic2.jpg', 'img/pic3.jpg', 'img/pic4.jpg']
    var l = new Lunbo(arr, '.box')
</script>